<template>
	<div>
		<div class="remotelinktop">
			<img src="../../static/image/closepdf.png" class="closelinkimg" @click="closeFormRemoteLink()" />
		</div>
		<div class="scroll-wrapper">
			<iframe ref="formIframe" allowTransparency="true" id="remotelink" class="iframelink" width="100%" height="100%" :src="formRemotelinkurl"></iframe>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		responseFillForm: {
			type: Function,
			default: null
		},
		formRemotelinkurl: {
			type: String,
			required: true,
			default: () => ''
		},
		formData: {
			type: Object,
			default: () => {}
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		}
	},
	mounted() {
		this.$nextTick(() => {
			let iframeWin = this.$refs.formIframe.contentWindow;
			iframeWin.postMessage(JSON.stringify(this.formData), formUrl);
			this.responseFillForm(
				this.cmdId,
				'in-progress',
				undefined,
				this.clientId,
				res => {
					console.log(res, 'response fill-form in-progress success');
				},
				err => {
					console.log(err, 'response fill-form in-progress error');
				}
			);
			this.addListenerForm();
		});
	},
	beforeDestroy() {
		window.removeEventListener('message', e => {
			console.log('移除Form表单监听事件成功！', e);
		});
	},
	methods: {
		//表单提交
		formListener(e) {
			console.log('event:', e.data);
			if (e.data && JSON.parse(e.data).type) {
				let data = JSON.parse(e.data); //转换成字符串
				let formData = {
					followId: this.formData.followId,
					formId: this.formData.sumbitFormId,
					formTemplate: this.formData.id,
					formName: this.formData.formName
				};
				if (data.type === 'form') {
					if (data.data.code === 200) {
						this.responseFillForm(
							this.cmdId,
							'done',
							formData,
							this.clientId,
							res => {
								console.log(res, 'done form submit success');
								this.$Notice.success({
									title: this.$t('ivcs.confirm'),
									desc: this.$t('sendFormMark.successTips'),
									duration: 2,
									top: 0
								});
							},
							err => {
								console.log(err, 'done form submit error');
							}
						);
					} else {
						this.$Notice.error({
							title: this.$t('ivcs.confirm'),
							desc: this.$t('sendFormMark.failedTips'),
							duration: 2,
							top: 0
						});
						this.responseFillForm(
							this.cmdId,
							'failed',
							formData,
							this.clientId,
							res => {
								console.log(res, 'failed form submit success');
							},
							err => {
								console.log(err, 'failed form submit error');
							}
						);
					}
					//移除监听
					window.removeEventListener('message', this.formListener, true);
					this.$emit('formSumbit');
				}
			}
		},
		// 监听 postMessage
		addListenerForm() {
			window.addEventListener('message', this.formListener, true);
		},
		//关闭表单视图
		closeFormRemoteLink() {
			let formData = {
				followId: this.formData.followId,
				formId: this.formData.sumbitFormId,
				formTemplate: this.formData.id,
				formName: this.formData.formName
			};
			this.responseFillForm(
				this.cmdId,
				'failed',
				formData,
				this.clientId,
				res => {
					console.log(res, 'close from success');
				},
				err => {
					console.log(err, 'close from error');
				}
			);
			//移除监听
			window.removeEventListener('message', this.formListener, true);
			this.$emit('closeFormRemoteLink');
		}
	}
};
</script>

<style scoped>
.remotelinktop {
	width: 100%;
	background-color: rgba(100, 202, 171, 1);
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;
}

.closelinkimg {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10000;
}

.iframelink {
	background: white;
	border: 0px;
}

.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	width: 100%;
	height: calc(100% - 50px);
	position: absolute;
	top: 50px;
	/* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}
</style>
